<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Document</title>
  <link rel="stylesheet" href="css/reset.min.css">
  <link rel="stylesheet" href="css/index.css">
  <script src="js/prefixfree.min.js" async></script>
  <script>
    /* 计算REM和PX换算比例 */
    (function () {
      const computed = () => {
        let winW = document.documentElement.clientWidth,
          ratio = 100;
        if (winW >= 750) {
          document.documentElement.style.fontSize = '100px';
          return;
        }
        ratio = winW / (750 / 100);
        document.documentElement.style.fontSize = ratio + 'px';
      };
      computed();
      // let event = window.hasOwnProperty('onorientationchange') ? 'orientationchange' : 'resize';
      window.addEventListener('resize', computed);
    })();
  </script>
</head>

<body>
  <section id="app">
    <!-- 头部 -->
    <header class="header-box">
      <div class="content">
        <img src="./img/10003.jpg" alt="">
        <div class="title">你知道这首歌居然被这么评论？</div>
      </div>
      <div class="info">
        <p class="txt">打开看看</p>
        <img src="./img/10009.png" alt="">
      </div>
    </header>
    <!-- song-dise  -->
    <div class="my-song">
      <div class="song-dise">
        <div class="song-turn">
           <img class="con" src="./img/10012.png" alt="">
          <div class="song-img">
            
            <img src="./img/109951165319864977.jpg" alt="">
           
          </div>
        </div>
        <div class="song-play"></div>
      </div>
    </div>


    <!-- 歌词 -->
    <main class="main-box">
      <h2 class="m-song-h2">
        <span class="song-sname">虞兮叹</span>
        <span class="m-song-gap">-</span>
        <b class="m-song-autr">闻人听書_</b>
      </h2>
      <div class="song-lrc">
        <div class="song-iner">
          <!-- <p>作词 : 祝何</p>
          <p>作词 : 祝何</p>
          <p>作词 : 祝何</p>
          <p>作词 : 祝何</p>
          <p>作词 : 祝何</p>
          <p>作词 : 祝何</p>
          <p>作词 : 祝何</p> -->
        </div>
      </div>
    </main>

    <!-- 尾部 -->
    <footer class="footer-box">
      <div class="left-box"><img class="icon" src="./img/10007.png" alt=""><img class="row" src="./img/10008.png" alt=""></div>
      <span></span>
      <div class="right-box">
        <span class="icon">一起听歌</span><img class="row" src="./img/yqi.svg" alt="">
      </div>
    </footer>

    <!-- 背景 -->
    <div class="bg-image"></div>
    <div class="bg-mark"></div>

    <!-- 音频 -->
    <audio src="./虞兮叹-闻人听書_.m4a" id="myAudio" preload="metadata"></audio>

  </section>
  <script src="js/fastclick.js" defer></script>
  <script src="js/subscribe.js" defer></script>
  <script src="js/index.js" defer></script>


</body>

</html>